<script setup lang="ts">
import { PlusDialogForm } from "plus-pro-components";
import { useTradeAppSettingsPage } from "./tradeApp";
import Add from "~icons/formkit/add";
import Trash from "~icons/formkit/trash";

defineOptions({ name: "trade-app-settings" });

const {
  // header
  searchQuery,
  openNew,
  openEdit,
  openCopy,
  isRowSelected,

  // table
  tableColumns,
  tableSize,
  filteredData,
  onCurrentChange,
  onRowClick,

  // dialog/form
  dialogVisible,
  dialogProps,
  dialogFormProps,
  dialogModel,
  handleConfirm,
  handleConfirmError,
  closeDialog,

  // helpers for slots
  addEnvVar,
  removeEnvVar,
  addEmailAddress,
  removeEmailAddress,

  // test send email
  handleTestSendEmail
} = useTradeAppSettingsPage();
</script>
<template>
  <div class="">
    <div
      class="bg-bg_color mb-1 flex flex-col items-end gap-2 p-1 sm:mb-2 sm:p-2 md:flex-row md:items-center md:justify-between md:p-3"
    >
      <el-input
        v-model="searchQuery"
        placeholder="搜索配置名称"
        class="md:max-w-sm"
        clearable
      />
      <div class="flex gap-1 md:gap-2">
        <el-button :size="tableSize" type="primary" @click="openNew"
          >新建</el-button
        >
        <el-button
          :size="tableSize"
          type="success"
          :disabled="!isRowSelected"
          @click="openEdit"
          >编辑</el-button
        >
        <el-button
          :size="tableSize"
          type="warning"
          :disabled="!isRowSelected"
          @click="openCopy"
          >复制</el-button
        >
      </div>
    </div>
    <div class="bg-bg_color mt-1 p-1 sm:mt-2 sm:p-2 md:p-3">
      <pure-table
        :size="tableSize"
        :data="filteredData"
        :columns="tableColumns"
        row-key="name"
        :border="true"
        :highlight-current-row="true"
        @current-change="onCurrentChange"
        @row-click="onRowClick"
        @row-dblclick="
          row => {
            onCurrentChange(row);
            openEdit();
          }
        "
      />

      <PlusDialogForm
        v-model:visible="dialogVisible"
        v-model="dialogModel"
        :dialog="dialogProps"
        :form="dialogFormProps"
        @confirm="handleConfirm"
        @confirm-error="handleConfirmError"
        @close="closeDialog"
      >
        <template #plus-field-email_addresses>
          <div class="w-full">
            <div v-if="dialogModel.email_addresses.length > 0" class="mb-2">
              <div
                v-for="(email, idx) in dialogModel.email_addresses"
                :key="idx"
                class="mb-2 flex items-center gap-2"
              >
                <el-input
                  v-model="dialogModel.email_addresses[idx]"
                  placeholder="请输入邮件地址"
                  class="flex-1"
                />
                <IconifyIconOffline
                  class="size-5 cursor-pointer text-gray-400 transition-colors hover:text-red-500"
                  :icon="Trash"
                  @click="removeEmailAddress(idx)"
                />
              </div>
            </div>
            <div v-else class="mb-2 text-sm text-gray-400">暂无邮件地址</div>

            <div class="flex items-center justify-between">
              <el-button
                text
                bg
                type="primary"
                :size="tableSize"
                @click="addEmailAddress"
              >
                <IconifyIconOffline :icon="Add" class="mr-1" />
                添加地址
              </el-button>

              <el-button
                v-if="dialogModel.email_addresses.length > 0"
                :size="tableSize"
                type="info"
                link
                @click="handleTestSendEmail"
              >
                发送测试邮件
              </el-button>
            </div>
          </div>
        </template>
        <template #plus-field-env_vars>
          <div class="w-full">
            <div v-if="dialogModel.env_vars.length > 0" class="mb-2">
              <div
                v-for="(item, idx) in dialogModel.env_vars"
                :key="idx"
                class="mb-2 flex items-center gap-2"
              >
                <el-input
                  v-model="item.key"
                  placeholder="变量名"
                  class="flex-1"
                />
                <el-input
                  v-model="item.value"
                  placeholder="变量值"
                  class="flex-1"
                />
                <IconifyIconOffline
                  class="size-5 cursor-pointer text-gray-400 transition-colors hover:text-red-500"
                  :icon="Trash"
                  @click="removeEnvVar(idx)"
                />
              </div>
            </div>
            <div v-else class="mb-2 text-sm text-gray-400">暂无环境变量</div>
            <div>
              <el-button
                text
                bg
                type="primary"
                :size="tableSize"
                @click="addEnvVar"
              >
                <IconifyIconOffline :icon="Add" class="mr-1" />
                添加变量
              </el-button>
            </div>
          </div>
        </template>
      </PlusDialogForm>
    </div>
  </div>
</template>
